<script setup name="addPersonnel">
import { reactive, ref,} from "vue";
import department from "@/plugins/data/department";
import personnel_data from "@/plugins/data/personnel_data";
import router from "@/router";
import {useRouter} from "vue-router";
const options = reactive(department)

let ruleForm = ref({
  name: '',
  idCard: '',
  age: '',
  department: '',
  workingGroup: '',
  post: '',
  role: [],
  userName: '',
  sex: '',
  pwd: '',
  openCard: 0,
  contactInformation: [
    {
      name: '手机号',
      value: ''
    },
    {
      name: '邮箱',
      value: ''
    }
  ]
})

let ruleFormBtn = ref({
  nameDisabled: true,
  idCardDisabled: true,
  ageDisabled: true,
  departmentDisabled: true,
  workingGroupDisabled: true,
  postDisabled: true,
  sexDisabled: true,
  roleDisabled: true,
  userNameDisabled: true,
  pwdDisabled: true,
  openCardDisabled: true,
  contactInformationDisabled: [],
})

const rules = ref({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  idCard: [
    { required: true, message: '请输入身份证', trigger: 'blur' },
  ],
  department: [
    {
      required: true,
      message: '请选择部门',
      trigger: 'change',
    },
  ],
  post: [
    { required: true, message: '请输入职务', trigger: 'blur' },
  ]
})
const ruleFormRef = ref(null)
function goPostDataFun () {
  router.push('/')
}

const departmentProps = reactive({
  label: 'name',
  value: 'id'
})


const route = useRouter()
function getPersonnel() {
  const id = route.currentRoute.value.query.id
  const list = personnel_data.getList()
  ruleForm.value = list.find(item => item.id == id)
  console.log(ruleForm.value)
  ruleForm.value.contactInformation.map(() => {
    ruleFormBtn.value.contactInformationDisabled.push(true)
  })
}

getPersonnel()

function roleDisabled() {
  if (ruleForm.value.openCard !== 1) {
    return true
  }else {
    return ruleFormBtn.value.roleDisabled
  }
}

function userNameDisabled() {
  if (ruleForm.value.openCard !== 1) {
    return true
  }else {
    return ruleFormBtn.value.userNameDisabled
  }
}

const addContactInformation = (index) => {
  ruleForm.value.contactInformation.splice(index + 1,0, {
    name: '',
    value: ''
  })
}

const removeContactInformation = (index) => {
  ruleForm.value.contactInformation.splice(index,1)
}

const editRule = (val) => {
  console.log(val)
  if (val === 1) {
    rules.value = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
      ],
      idCard: [
        { required: true, message: '请输入身份证', trigger: 'blur' },
      ],
      department: [
        {
          required: true,
          message: '请选择部门',
          trigger: 'change',
        },
      ],
      post: [
        { required: true, message: '请输入职务', trigger: 'blur' },
      ],
      userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
      role: [
        { required: true, message: '请选择角色', trigger: 'change'},
      ],
    }
  }else {
    rules.value = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
      ],
      idCard: [
        { required: true, message: '请输入身份证', trigger: 'blur' },
      ],
      department: [
        { required: true, message: '请选择部门', trigger: 'change' },
      ],
      post: [
        { required: true, message: '请输入职务', trigger: 'blur' },
      ]
    }
  }
}

</script>

<template>
  <div class="addPersonnel">
    <div class="addPersonnel_model">
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          :validate-on-rule-change="false"
          class="demo-ruleForm"
          size="large"
          status-icon
      >
        <div class="addPersonnel_model_body">
          <el-divider content-position="left">基本信息</el-divider>
          <div class="addPersonnel_model_body_content">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <div class="formEditDiv">
                    <div class="formEditInput">
                      <el-input :disabled="ruleFormBtn.nameDisabled" v-model="ruleForm.name" placeholder="请输入姓名" />
                    </div>
                    <div class="formEditBtn">
                      <el-icon style="font-size: 26px;cursor: pointer"><Edit /></el-icon>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证" prop="idCard">
                  <div class="formEditDiv">
                    <div class="formEditInput">
                      <el-input v-model="ruleForm.idCard" :disabled="ruleFormBtn.idCardDisabled" placeholder="请输入身份证" />
                    </div>
                    <div class="formEditBtn">
                      <el-icon style="font-size: 26px;cursor: pointer"><Edit /></el-icon>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="年龄" prop="age">
                  <div class="formEditDiv">
                    <div class="formEditInput">
                      <el-input v-model="ruleForm.age" :disabled="ruleFormBtn.ageDisabled" placeholder="请输入年龄"/>
                    </div>
                    <div class="formEditBtn">
                      <el-icon style="font-size: 26px;cursor: pointer"><Edit /></el-icon>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属部门" prop="department">
                  <div class="formEditDiv">
                    <div class="formEditInput">
                      <el-cascader style="width: 100%" placeholder="请选择部门" :props="departmentProps"
                                   filterable
                                   :disabled="ruleFormBtn.departmentDisabled"
                                   v-model="ruleForm.department"
                                   :options="options" />
                    </div>
                    <div class="formEditBtn">
                      <el-icon style="font-size: 26px;cursor: pointer"><Edit /></el-icon>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="工作组" prop="workingGroup">
                  <div class="formEditDiv">
                    <div class="formEditInput">
                      <el-select style="width: 100%"
                                 :disabled="ruleFormBtn.workingGroupDisabled"
                                 v-model="ruleForm.workingGroup" placeholder="请选择工作组">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                      </el-select>
                    </div>
                    <div class="formEditBtn">
                      <el-icon style="font-size: 26px;cursor: pointer"><Edit /></el-icon>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职务" prop="post">
                  <div class="formEditDiv">
                    <div class="formEditInput">
                      <el-input v-model="ruleForm.post" :disabled="ruleFormBtn.postDisabled" />
                    </div>
                    <div class="formEditBtn">
                      <el-icon style="font-size: 26px;cursor: pointer"><Edit /></el-icon>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="性别" prop="workingGroup">

                  <div class="formEditDiv">
                    <el-select style="width: 100%" v-model="ruleForm.sex" :disabled="ruleFormBtn.sexDisabled" placeholder="请选择性别">
                      <el-option label="女" :value="1" />
                      <el-option label="男" :value="2" />
                    </el-select>
                    <div class="formEditBtn">
                      <el-icon style="font-size: 26px;cursor: pointer"><Edit /></el-icon>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="addPersonnel_model_body">
          <el-divider content-position="left">联系方式</el-divider>
          <div class="addPersonnel_model_body_content">
            <div style="margin-bottom: 15px;box-sizing: border-box;padding-left: 80px" v-for="(data, index) in ruleForm.contactInformation" :key="index">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-input
                      :disabled="ruleFormBtn.contactInformationDisabled[index]"
                      v-model="data.name"
                      placeholder="请输入联系类型"></el-input>
                </el-col>
                <el-col :span="12">
                  <el-input
                      :disabled="ruleFormBtn.contactInformationDisabled[index]"
                      v-model="data.value"
                      placeholder="请输入联系方式"></el-input>
                </el-col>
                <el-col :span="4">
                  <div class="operate">
                    <el-icon style="font-size: 26px;margin-right: 10px;cursor: pointer"><Edit /></el-icon>
                    <el-icon color="cornflowerblue" @click="addContactInformation(index)" style="margin-right: 10px;cursor: pointer">
                      <CirclePlusFilled />
                    </el-icon>
                    <el-icon color="#df0505" v-if="index !== 0" @click="removeContactInformation(index)" style="cursor: pointer">
                      <RemoveFilled />
                    </el-icon>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div class="addPersonnel_model_body">
          <el-divider content-position="left">账号管理</el-divider>
          <div class="addPersonnel_model_body_content" >
            <el-form-item label="开通账号" prop="openCard">
              <el-switch @change="editRule" :disabled="ruleForm.openCard === 1" v-model="ruleForm.openCard" :active-value="1" :inactive-value="0"/>
            </el-form-item>
            <el-form-item label="账号" prop="userName" v-if="ruleForm.openCard === 1">
              <div class="formEditDiv">
                <div class="formEditInput" style="width: 300px;flex-basis: 300px">
                  <el-input :disabled="userNameDisabled"  v-model="ruleForm.userName" />
                </div>
                <div class="formEditBtn">
                  <el-icon style="font-size: 26px;cursor: pointer"><Edit /></el-icon>
                </div>
              </div>

            </el-form-item>
            <el-form-item label="角色" prop="role" v-if="ruleForm.openCard === 1">
              <div class="formEditDiv">
                <div class="formEditInput" style="width: 300px;flex-basis: 300px">
                  <el-select style="width: 100%" multiple :disabled="roleDisabled" v-model="ruleForm.role"  placeholder="请选择角色">
                    <el-option label="行政人员" value="shanghai" />
                    <el-option label="行政主管" value="2" />
                    <el-option label="财务人员" value="3" />
                    <el-option label="技术人员" value="4" />
                    <el-option label="财务主管" value="5" />
                  </el-select>
                </div>
                <div class="formEditBtn">
                  <el-icon style="font-size: 26px;cursor: pointer"><Edit /></el-icon>
                </div>
              </div>

            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="addPersonnel_footer">
      <el-button type="primary" size="large" @click="goPostDataFun()">返 回</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.addPersonnel {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  left: 6px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);

  .addPersonnel_model {
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 10px;
    height: calc(100% - 50px);

    .addPersonnel_model_body_title {
      font-size: 18px;
      width: max-content;
      box-sizing: border-box;
      padding: 10px 50px 10px 0;
      border-bottom: 1px solid deepskyblue;
    }

    .addPersonnel_model_body_content {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 15px 0;

      .operate {
        width: 100%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        align-items: center;
        font-size: 22px;
      }
    }
  }

  .addPersonnel_footer {
    text-align: center;
    box-sizing: border-box;
    padding: 0 25px;
    width: 100%;
    height: 50px;
  }
}

.formEditDiv {
  width: 100%;
  height: 43px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  align-items: center;

  .formEditInput {
    width: calc(100% - 40px);
    flex-basis: calc(100% - 40px);
    flex-shrink: 0;
  }
  .formEditBtn {
    width: 40px;
    cursor: pointer;
    flex-basis: 40px;
    flex-shrink: 0;
    height: 43px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
  }
}

</style>
<style lang="scss">
.addPersonnel {
  .el-button {
    border-radius: 0;

  }

  .el-button--primary {
    background-color: cornflowerblue;
  }

  .el-radio-button__original-radio:checked+.el-radio-button__inner {
    background-color: cornflowerblue;
  }
}
</style>